<template>
  <div class="tp" v-loading="state.loading">
    <Header />

    <Content>
      <div class="card" style="padding: 24px; margin-top: 12px">
        <div style="font-weight: 500; font-size: 18px; color: #333333; padding: 12px 0 0 0"
          >数据概览</div
        >
        <div style="background: #e5e5e5; height: 1px; margin: 12px 0" />

        <a-row :gutter="[12, 32]">
          <a-col :span="6">
            <a-flex align="center" gap="middle">
              <div>
                <img src="./img/do1.png" alt="" style="width: 36px; object-fit: contain" />
              </div>
              <div>
                <div style="font-weight: 400; font-size: 16px; color: #666666"
                  ><span style="margin-right: 8px">总业绩 (元)</span>
                  <Popover>
                    <template #content>
                      <div>当日订单金额汇总-退款金额汇总（不含挂单）</div>
                    </template>
                    <InfoCircleOutlined />
                  </Popover>
                </div>
                <div style="font-weight: 500; font-size: 24px; color: #eb6485; margin-top: 6px">{{
                  overviewRef.totalShoppingPrice || 0
                }}</div>
              </div>
            </a-flex>
          </a-col>

          <a-col :span="6">
            <a-flex align="center" gap="middle">
              <div>
                <img src="./img/do2.png" alt="" style="width: 36px; object-fit: contain" />
              </div>
              <div>
                <div style="font-weight: 400; font-size: 16px; color: #666666"
                  ><span style="margin-right: 8px">销售业绩 (元)</span>
                  <Popover>
                    <template #content>
                      <div>当日订单里因为销售产生的业绩汇总（含购买、卡续充、卡升级）-退款金额汇总</div>
                    </template>
                    <InfoCircleOutlined />
                  </Popover>
                </div>
                <div style="font-weight: 500; font-size: 24px; color: #333333; margin-top: 6px">{{
                  overviewRef.totalCashPrice || 0
                }}</div>
              </div>
            </a-flex>
          </a-col>

          <a-col :span="6">
            <a-flex align="center" gap="middle">
              <div>
                <img src="./img/do3.png" alt="" style="width: 36px; object-fit: contain" />
              </div>
              <div>
                <div style="font-weight: 400; font-size: 16px; color: #666666"
                  ><span style="margin-right: 8px">卡项销售金额 (元)</span>
                  <Popover>
                    <template #content>
                      <div>当日订单里购买卡项的金额汇总-卡项退款金额汇总</div>
                    </template>
                    <InfoCircleOutlined />
                  </Popover>
                </div>
                <div style="font-weight: 500; font-size: 24px; color: #333333; margin-top: 6px">{{
                  overviewRef.totalSaleCardPrice || 0
                }}</div>
              </div>
            </a-flex>
          </a-col>

          <a-col :span="6">
            <a-flex align="center" gap="middle">
              <div>
                <img src="./img/do4.png" alt="" style="width: 36px; object-fit: contain" />
              </div>
              <div>
                <div style="font-weight: 400; font-size: 16px; color: #666666"
                  ><span style="margin-right: 8px">产品销售金额 (元)</span>
                  <Popover>
                    <template #content>
                      <div>当日订单里购买居家产品的金额汇总-产品退款金额汇总</div>
                    </template>
                    <InfoCircleOutlined />
                  </Popover>
                </div>
                <div style="font-weight: 500; font-size: 24px; color: #333333; margin-top: 6px">{{
                  overviewRef.totalSaleGoodsPrice || 0
                }}</div>
              </div>
            </a-flex>
          </a-col>

          <a-col :span="6">
            <a-flex align="center" gap="middle">
              <div>
                <img src="./img/do5.png" alt="" style="width: 36px; object-fit: contain" />
              </div>
              <div>
                <div style="font-weight: 400; font-size: 16px; color: #666666"
                  ><span style="margin-right: 8px">抖音核销笔数</span>
                  <Popover>
                    <template #content>
                      <div>当日核销的抖音订单的笔数</div>
                    </template>
                    <InfoCircleOutlined />
                  </Popover>
                </div>
                <div style="font-weight: 500; font-size: 24px; color: #333333; margin-top: 6px">{{
                  overviewRef.douyinNum || 0
                }}</div>
              </div>
            </a-flex>
          </a-col>

          <a-col :span="6">
            <a-flex align="center" gap="middle">
              <div>
                <img src="./img/do6.png" alt="" style="width: 36px; object-fit: contain" />
              </div>
              <div>
                <div style="font-weight: 400; font-size: 16px; color: #666666"
                  ><span style="margin-right: 8px">美团/点评核销笔数</span>
                  <Popover>
                    <template #content>
                      <div>当日核销的美团/点评订单的笔数</div>
                    </template>
                    <InfoCircleOutlined />
                  </Popover>
                </div>
                <div style="font-weight: 500; font-size: 24px; color: #333333; margin-top: 6px">{{
                  overviewRef.meituanNum || 0
                }}</div>
              </div>
            </a-flex>
          </a-col>
        </a-row>

        <div style="background: #fbfbfb; border-radius: 6px; margin-top: 24px; padding: 0 16px">
          <a-row :gutter="12" style="padding: 24px 0">
            <a-col :span="6">
              <a-flex align="center" gap="middle">
                <div>
                  <img src="./img/do7.png" alt="" style="width: 36px; object-fit: contain" />
                </div>
                <div>
                  <div style="font-weight: 400; font-size: 16px; color: #666666"
                    ><span style="margin-right: 8px">实收金额 (元)</span>
                    <Popover>
                      <template #content>
                        <div>当日订单里实际收到的现金汇总+还款金额汇总</div>
                      </template>
                      <InfoCircleOutlined />
                    </Popover>
                  </div>
                  <div style="font-weight: 500; font-size: 24px; color: #333333; margin-top: 6px">{{
                    overviewRef.totalTransactionPrice || 0
                  }}</div>
                </div>
              </a-flex>
            </a-col>

            <a-col :span="4">
              <a-flex align="center" gap="middle">
                <div>
                  <div style="font-weight: 400; font-size: 16px; color: #666666"
                    ><span style="margin-right: 8px">还款金额</span>
                    <Popover>
                      <template #content>
                        <div>当日还款金额汇总</div>
                      </template>
                      <InfoCircleOutlined />
                    </Popover>
                  </div>
                  <div style="font-weight: 400; font-size: 20px; color: #333333; margin-top: 6px">{{
                    overviewRef.totalRepaymentPrice || 0
                  }}</div>
                </div>
              </a-flex>
            </a-col>

            <a-col :span="4">
              <a-flex align="center" gap="middle">
                <div>
                  <div style="font-weight: 400; font-size: 16px; color: #666666"
                    ><span style="margin-right: 8px">欠款金额</span>
                    <Popover>
                      <template #content>
                        <div>当日订单里的欠款金额汇总</div>
                      </template>
                      <InfoCircleOutlined />
                    </Popover>
                  </div>
                  <div style="font-weight: 400; font-size: 20px; color: #333333; margin-top: 6px">{{
                    overviewRef.totalDebtPrice || 0
                  }}</div>
                </div>
              </a-flex>
            </a-col>

            <a-col :span="4">
              <a-flex align="center" gap="middle">
                <div>
                  <div style="font-weight: 400; font-size: 16px; color: #666666"
                    ><span style="margin-right: 8px">退款金额</span>
                    <Popover>
                      <template #content>
                        <div>当日产生的退款金额汇总（退卡次数的也按金额折算）</div>
                      </template>
                      <InfoCircleOutlined />
                    </Popover>
                  </div>
                  <div style="font-weight: 400; font-size: 20px; color: #333333; margin-top: 6px">{{
                    overviewRef.totalRefundPrice || 0
                  }}</div>
                </div>
              </a-flex>
            </a-col>
          </a-row>

          <div style="background: #e5e5e5; height: 1px" />

          <a-row :gutter="12" style="padding: 24px 0">
            <a-col :span="6" style="margin-bottom: 10px;">
              <a-flex align="center" gap="middle">
                <div>
                  <img src="./img/do8.png" alt="" style="width: 36px; object-fit: contain" />
                </div>
                <div>
                  <div style="font-weight: 400; font-size: 16px; color: #666666"
                    ><span style="margin-right: 8px">消耗业绩 (元)</span>
                    <Popover>
                      <template #content>
                        <div>当日订单里因为消耗产生的业绩汇总-退款金额汇总</div>
                      </template>
                      <InfoCircleOutlined />
                    </Popover>
                  </div>
                  <div style="font-weight: 500; font-size: 24px; color: #333333; margin-top: 6px">{{
                    overviewRef.totalCardPrice || 0
                  }}</div>
                </div>
              </a-flex>
            </a-col>

            <a-col :span="4" v-for="(item, index) in overviewRef.catePriceList" :key="index" style="margin-bottom: 10px;">
              <a-flex align="center" gap="middle">
                <div>
                  <div style="font-weight: 400; font-size: 16px; color: #666666"
                    ><span style="margin-right: 8px">{{ item.cateName }}</span>
                    <Popover>
                      <template #content>
                        <div>{{ '当日订单里因为{' + item.cateName + '}的消耗产生的业绩汇总'  }}</div>
                      </template>
                      <InfoCircleOutlined />
                    </Popover>
                  </div>
                  <div style="font-weight: 400; font-size: 20px; color: #333333; margin-top: 6px">{{
                    item.catePrice
                  }}</div>
                </div>
              </a-flex>
            </a-col>
            
            <!-- <a-col :span="4">
              <a-flex align="center" gap="middle">
                <div>
                  <div style="font-weight: 400; font-size: 16px; color: #666666"
                    ><span style="margin-right: 8px">身体消耗业绩</span>
                    <Popover>
                      <template #content>
                        <div>当日订单里因为{身体疗程}的消耗产生的业绩汇总</div>
                      </template>
                      <InfoCircleOutlined />
                    </Popover>
                  </div>
                  <div style="font-weight: 400; font-size: 20px; color: #333333; margin-top: 6px">{{
                    0
                  }}</div>
                </div>
              </a-flex>
            </a-col> -->
          </a-row>
        </div>

        <div style="font-weight: 500; font-size: 18px; color: #333333; padding: 24px 0 6px 0"
          >员工维度</div
        >

        <BasicTable @register="registerTable1" ref="table1" :dataSource="dataSource1Ref" :scroll="{ y: 320 }">
        </BasicTable>

        <div style="font-weight: 500; font-size: 18px; color: #333333; padding: 24px 0 6px 0"
          >客户维度</div
        >

        <BasicTable @register="registerTable2" ref="table2" :dataSource="dataSource2Ref" :scroll="{ y: 320 }">
        </BasicTable>
      </div>
    </Content>
  </div>
</template>

<script setup>
  import { Popover } from 'ant-design-vue';
  import { computed, defineOptions, onMounted, reactive, ref } from 'vue';
  import { useMessage } from '@/hooks/web/useMessage';

  import Header from '@/widget/header.vue';
  import Content from '@/widget/content.vue';
  import { useRoute, useRouter } from 'vue-router';
  import dayjs from 'dayjs';
  import { InfoCircleOutlined } from '@ant-design/icons-vue';
  import { BasicTable, useTable } from '@/components/Table';
  import { POST } from '@/api/http.js';

  defineOptions({ name: 'CashierDailyOverview' });

  const { createMessage } = useMessage();

  const route = useRoute(),
    router = useRouter();
  const state = reactive({ workDate: dayjs() });
  const dataSource1Ref = ref([]);
  const dataSource2Ref = ref([]);
  const overviewRef = ref({});
  const table1 = ref(null);
  const table2 = ref(null);


  onMounted(() => {
    loadData();
  });

  async function loadData() {
    const workDate = dayjs().format('YYYY-MM-DD');

    POST('/cashier/getOrderDailyEmployee', { workDate }).then((result) => {
      result?.forEach( el => {
        el.catePriceList.forEach( emp => {
          el[emp.cateCode] = emp.catePrice;
          if(!table1BaseColumns.find(col => col.dataIndex === emp.cateCode)){
            table1BaseColumns.push({
              title: emp.cateName,
              dataIndex: emp.cateCode,
              ellipsis: false,
            });
          }
        });
      });
      table1.value.setColumns(
        table1BaseColumns
      );
      dataSource1Ref.value = result;
    });

    POST('/cashier/getOrderDailyMember', { workDate }).then((result) => {
      result?.forEach( el => {
        el.catePriceList.forEach( emp => {
          el[emp.cateCode] = emp.catePrice;
          if(!table2BaseColumns.find(col => col.dataIndex === emp.cateCode)){
            table2BaseColumns.splice(5,0,{
              title: emp.cateName,
              dataIndex: emp.cateCode,
              ellipsis: false,
            })
          }
        });
      });
      table2.value.setColumns(
        table2BaseColumns
      );
      dataSource2Ref.value = result;
    });

    POST('/cashier/getOrderDailyOverview', { workDate }).then((result) => {
      overviewRef.value = result ?? {};
      overviewRef.value.catePriceList = overviewRef.value.catePriceList;
    });
  }

  let table1BaseColumns = [
      {
        title: '员工姓名',
        dataIndex: 'employeeName',
        ellipsis: false,
      },

      {
        title: '销售业绩',
        dataIndex: 'totalCashPrice',
        ellipsis: false,
      },
      {
        title: '卡项销售业绩',
        dataIndex: 'totalSaleCardPrice',
        ellipsis: false,
      },

      {
        title: '产品销售业绩',
        dataIndex: 'totalSaleGoodsPrice',
        ellipsis: false,
      },

      {
        title: '消耗业绩',
        dataIndex: 'totalCardPrice',
        ellipsis: false,
      },
  ];
  const [registerTable1] = useTable({
    pagination: false,
    columns: [],
    useSearchForm: false,
    showTableSetting: false,
    bordered: true,
    showIndexColumn: false,
    rowKey: 'employeeCode',
  });


  let table2BaseColumns = [
  {
        title: '客户姓名',
        dataIndex: 'memberName',
        ellipsis: false,
      },

      {
        title: '销售业绩',
        dataIndex: 'totalCashPrice',
        ellipsis: false,
      },
      {
        title: '卡项销售业绩',
        dataIndex: 'totalSaleCardPrice',
        ellipsis: false,
      },

      {
        title: '产品销售业绩',
        dataIndex: 'totalSaleGoodsPrice',
        ellipsis: false,
      },

      {
        title: '消耗业绩',
        dataIndex: 'totalCardPrice',
        ellipsis: false,
      },

      {
        title: '欠款金额',
        dataIndex: 'totalDebtPrice',
        ellipsis: false,
      },
      {
        title: '还款金额',
        dataIndex: 'totalRepaymentPrice',
        ellipsis: false,
      },
      {
        title: '退款金额',
        dataIndex: 'totalRefundPrice',
        ellipsis: false,
      },
  ]
  const [registerTable2] = useTable({
    pagination: false,
    columns: [],
    useSearchForm: false,
    showTableSetting: false,
    bordered: true,
    showIndexColumn: false,
    rowKey: 'memberCode',
  });
</script>

<style lang="less" scoped></style>
